<template>
  <div>
    <el-form :rules="rules" class="login-container" label-position="left" label-width="0px"
             v-loading="loading" :model="ruleForm" ref="ruleForm">
      <h2 class="register_title">注册账号</h2>

      <el-form-item prop="name">
        <el-input type="text" v-model="ruleForm.name" auto-complete="off" placeholder="用户名"></el-input>
      </el-form-item>

      <el-form-item prop="pwd">
        <el-input type="password" v-model="ruleForm.pwd" auto-complete="off" placeholder="密码"></el-input>
      </el-form-item>

      <el-form-item prop="code">
        <el-input type="text" v-model="ruleForm.code" auto-complete="off" placeholder="验证码"
                  style="float:left;display: inline-block;width:190px" ref = "code"></el-input>
        <div class="coderight" @click="refreshCode()" style="margin-left:40px;float:left;display: inline-block;">
          <SIdentify></SIdentify>
        </div>
      </el-form-item>

      <el-form-item style="width:99%">
        <el-button type="success" round style="width:100%" @click="registerBtn('ruleForm')">提交</el-button>
      </el-form-item>

      <el-form-item style="width:99%">
        <el-button type="info" round style="width:100%" @click="cancelBtn()">取消注册</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
  import SIdentify from "./Sidentify";
  import cookie from 'js-cookie'

  const axios = require('axios')
  export default {
    components: {SIdentify: SIdentify},
    data() {
      return {
        rules: {
          name: [{required: true, message: '用户名不能为空', trigger: 'blur'}],
          pwd: [{required: true, message: '密码不能为空', trigger: 'blur'}],
          code: [{required: true, message: '验证码不能为空', trigger: 'blur'}]
        },
        ruleForm: {
          name: '',
          pwd: '',
          code: ''
        },
        loading: false
      }
    },
    methods: {
      cancelBtn() { // 取消
        this.$router.push('/login');
        /*this.$message.error('取消注册');*/
      },
      refreshCode() {
        window.location.reload()
      },
      registerBtn(formName) { // 注册 提交
        const _this = this
        this.$refs[formName].validate((valid) => {
          const inputCode = this.$refs.code.value
          //console.log('输入的验证码为:' + inputCode)
          const realCode = cookie.get('code')
          if (valid) {
            if (inputCode != realCode) {
              _this.$alert('验证码错误', '消息', {
                confirmButtonText: '确定'
              });
              return false;
            } else {
              axios.post('http://localhost:9000/user/save', this.ruleForm).then(function (resp) {
                //console.log(resp)
                if (resp.data == 'success') {
                  _this.$alert('用户<' + _this.ruleForm.name + '>注册成功!', '消息', {
                    confirmButtonText: '确定',
                    callback: action => { // 回调函数
                      _this.$router.push('/login')
                    }
                  });
                }else if(resp.data=='can not repeat'){
                  _this.$alert('用户名已存在，请重新注册!', '消息', {
                    confirmButtonText: '确定',
                    callback: action => { // 回调函数
                      window.location.reload()
                    }
                  });
                }
              })
            }
          } else {
            return false;
          }
        });
      }
    }
  }
</script>

<style>

  /*隐藏 滚动条*/
  ::-webkit-scrollbar {
    width: 0 !important;
  }
  ::-webkit-scrollbar {
    width: 0 !important;height: 0;
  }

  .login-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 35px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }

  .register_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }

</style>
